@import "common.less";

/***Global***/
body {
    background-color: @bg;

    progress{
        .bold;
        width: 80px;
    }
    
    div.mainTitle{
        font-size: 5em;
        p{
            a{
                writing-mode:tb-rl;
                -webkit-transform:rotate(270deg);
                -moz-transform:rotate(270deg);
                -o-transform: rotate(270deg);
                white-space:nowrap;
                display:block;
                margin-top: 330px;
                color: #222;
                text-shadow: 0px 2px 3px #555;
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }

    aside{
        div#share {
            width: 100px;
            padding: 5px 0;
            height: 30px;
            margin: 0 auto;
            div:nth-child(1){
                .float-left;
            }
        }
    }

    section{
        img {
            box-shadow: 0 0 4px 0 #333;
            margin: 4px 2px;
            -webkit-filter: grayscale(80%);
            filter: grayscale(80%);
        }
        &#skills{
            small{
                .block;
                font-size: 0.8em;
            }
        }
        &#home{
            div#homeMenu{
                > div{
                    .p100;
                    .inline-block;
                    background-color: @bg;

                    @media screen and (min-width: @minTabletPDisplay) {
                        width: 130px;
                        height: 80px;
                    }

                    &.over{
                        border-style: dashed !important;
                    }

                    &.moving{
                        opacity: 0.4;

                        -webkit-transform: scale(0.8);
                        -moz-transform: scale(0.8);
                        -ms-transform: scale(0.8);
                        -o-transform: scale(0.8);
                        transform: scale(0.8);

                        -webkit-transition: -webkit-transform 0.2s ease-out;
                        -moz-transition: -moz-transform 0.2s ease-out;
                        -o-transition: -o-transform 0.2s ease-out;
                        -ms-transition: -ms-transform 0.2s ease-out;
                        transition: -ms-transform 0.2s ease-out;
                    }

                    > a.homeMenu{
                        .p100;
                        .inline-block;
                        font-size: 1.2em;
                        height: 100%;
                        text-decoration:none;
                    }
                }
            }
        }
    }
}